<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="point-box flexWarpCenterColumn" v-if="isSuccess==1">
					<image src="../../static/public/success-icon.png" class="success-icon"></image>
					<view class="point-name">下单成功</view>
					<view class="point-cont flexWarpCenterColumn">
						<text>请到店后点击“开始”按钮开灯。</text>
					</view>
				</view>
				<view class="point-box flexWarpCenterColumn" v-else>
					<image src="../../static/public/fails-icon.png" class="success-icon"></image>
					<view class="point-name">下单失败</view>
					<view class="point-cont flexWarpCenterColumn">
						<text>付款超时，请重新下单,所支付金额已原路退款</text>
					</view>
				</view>
				<view class="order-box">
					<view class="order-item">
						<view class="item-top flexWrap">
							<view class="order-info flexWarpColumn">
								<view class="order-name">
									<text>{{orderInfo.store_equipment_name||'加载中...'}}</text>
									<text class="shop-name">{{orderInfo.shop_name||'加载中...'}}</text>
								</view>
								<view class="order-time">{{orderInfo.order_type=="immediately"?"立刻开台":orderInfo.order_type=="make_appointment"?"预约开台":"其他套餐"}}{{orderInfo.quantity||'加载中...'}}小时</view>
								<view class="order-date">{{orderInfo.service_date||'加载中...'}} {{orderInfo.start_time||'加载中...'}}～<text v-if="orderInfo.is_ci==1">次日</text> {{orderInfo.end_time||'加载中...'}}</view>
								<view class="order-btn" v-if="orderInfo.order_status==10">使用中</view>
								<view class="order-btn noStarted" v-if="orderInfo.order_status==0" @tap.stop="showTips(0)">开始/开灯</view>
								<view class="order-btn end" v-if="orderInfo.order_status==20">已结束</view>
								<view class="order-btn end" v-if="orderInfo.order_status==30">已取消</view>
							</view>
							<view class="order-img">
								<image src="/static/order/billiards.png" v-if="orderInfo.type==1"></image>
								<image src="/static/order/mj.png" v-else></image>
							</view>
						</view>
						<view class="open-box flexWrap" v-if="orderInfo.type==2">
							<view class="open-btn" @tap.stop="goPage('/pages/home/openDoor')">开门</view>
							<button class="open-btn share" open-type="share">分享开门</button>
						</view>
						<view class="item-bottom flexWrap" @tap="goOrderDetails()">
							<view>下单时间：{{orderInfo.createtime||'加载中...'}}</view>
							<view>详情 <text class="icon-more"></text> </view>
						</view>
					</view>
				</view>
				<view class="task-box" v-if="taskList.length!=0">
					<view class="task-tips">您已触发任务挑战，完成以下任务可获取奖励！详情店铺首页点击“任务挑战”查看</view>
					<view class="task-item flexWrapNo" v-for="(item,index) in taskList" :key="index">
						<image src="../../static/home/task-success.png" class="task-icon" v-if="item.progress=='100%'"></image>
						<image src="../../static/home/task-icon.png" class="task-icon" v-else></image>
						<view class="task-cont">
							<view class="task-top flexWrap">
								<view class="task-title">[{{item.task_name}}]</view>
								<view v-if="item.task_type==1">{{item.time_len}}/{{item.task_target}}</view>
								<view v-else>当前排名:{{item.ranking}}</view>
							</view>
							<view class="progress-box">
								<view class="progress-child" :style="{width:item.progress}"></view>
							</view>
							<view class="task-text">{{item.task_desc}} <text v-if="item.task_type==2">(统计截止:{{item.end_date}})</text> </view>
						</view>
					</view>
				</view>
				<view class="tips-box flexWarpCenterColumn" v-if="tipsFlage">
					<view class="tips-name" v-if="showIndex==0">是否确认开灯？</view>
					<view class="tips-name" v-else>是否确认关灯？</view>
					<view class="btn-box flexWrap">
						<view class="tips-btn" @tap="closeTips()">取消</view>
						<view class="tips-btn noStarted" @tap="openLamp()" v-if="showIndex==0">确定开灯</view>
						<view class="tips-btn noStarted" @tap="opreaAction()" v-else>确定关灯</view>
					</view>
				</view>
				<view class="mask-box" v-if="tipsFlage"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				orderInfo:{
					
				},
				tipsFlage:false,
				order_id:"",
				showIndex:0,
				isSuccess:1,
				taskList:[],
			}
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onLoad(ops) {
			this.order_id=ops.order_id
			uni.showLoading({
				title:'加载中...',
				mask:true
			})
			this.orderDetails();
			this.getData();
		},
		onShareAppMessage: function(e) {
			let that=this
			return {
				title:"开门",
				path: `/pages/home/openDoor?store_id=${uni.getStorageSync('store_id')}&token=${uni.getStorageSync('token')}`,
				imageUrl:"",
				success: (res) => {
					uni.showToast({
						title: '分享成功',
						icon: 'success',
						duration: 1500
					})
				}
			}
		},
		methods: {
			showTips(showIndex){
				this.tipsFlage=true
				this.showIndex=showIndex
			},
			closeTips(){
				this.tipsFlage=false
			},
			// 订单详情
			orderDetails(){
				this.$request.post(this.$api.orderDetails, {
					order_id:this.order_id
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.orderInfo=data
						this.orderInfo.createtime = this.$tools.formatDate(this.orderInfo.createtime)
						this.orderInfo.service_start_time = this.$tools.formatDate(this.orderInfo.service_start_time,0)
						this.orderInfo.service_end_time = this.$tools.formatDate(this.orderInfo.service_end_time,0)
						this.orderInfo.service_date=this.orderInfo.service_start_time.split(' ')[0]
						this.orderInfo.start_time=this.orderInfo.service_start_time.split(' ')[1]
						this.orderInfo.end_time=this.orderInfo.service_end_time.split(' ')[1]
						if(this.orderInfo.payment_status==0){
							this.isSuccess=0
						}else{
							this.isSuccess=1
						}
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			getData() {
				let self = this
				this.$request.post(this.$api.taskList, {
					page: 1,
					num: 10,
					status:1,
					store_id:uni.getStorageSync('store_id')
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						let newArray = data.data
						if(newArray.length!=0){
							for (let i in newArray) {
								if(newArray[i].task_type==1){
									newArray[i].progress = Number(newArray[i].time_len)/newArray[i].task_target*100+'%'
								}else{
									newArray[i].progress = Number(newArray[i].ranking)/newArray[i].join_num*100+'%'
								}
							}
						}
						self.taskList = newArray;
					}
				})
			},
			// 开灯
			openLamp(){
				this.$jiuaiDebounce.canDoFunction({
					key: 'openLamp', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.openLamp, {
							order_id:this.order_id
						}, {
							token:true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code==1) {
								// this.isSuccess=1
								if(this.orderInfo.order_type=="immediately"){
									this.closeTips();
									this.orderDetails();
								}else{
									this.$tools.showToast('开灯成功')
									setTimeout(() => {
										console.log('跳转')
										uni.switchTab({
											url:'/pages/order/orderList'
										})
									}, 2000)
								}
							}
							// else if(res.code==400){
							// 	this.isSuccess=0
							// 	this.$tools.showToast(res.msg)
							// }
						})
					}
				})
			},
			opreaAction(){
				if(this.orderInfo.order_type=='other_packages'&&this.orderInfo.order_status!=0){//套餐
					this.closeLamp();
				}else{
					this.cancelOrder();
				}
			},
			// 关灯
			closeLamp(){
				this.$jiuaiDebounce.canDoFunction({
					key: 'closeLamp', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.closeLamp, {
							order_id:this.order_id
						}, {
							token:true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code==1) {
								this.$tools.showToast('关灯成功')
								this.orderInfo.order_status=20
								this.closeTips();
							}
						})
					}
				})
			},
			// 取消订单
			cancelOrder(){
				this.$jiuaiDebounce.canDoFunction({
					key: 'cancelOrder', //基于此值判断是否可以操作，如两个方法传入了同样的key，则会混淆，建议传入调用此事件的方法名，简单好梳理
					time: 2000, //如果传入time字段，则为定时器后，自动解除锁定状态，单位（毫秒）
					success: () => { //成功中调用应该操作的方法，被锁定状态不会执行此代码块内的方法
						this.$request.post(this.$api.cancelOrder, {
							order_id:this.order_id
						}, {
							token:true
						}).then(res => {
							let {
								data = {}
							} = res;
							if (res.code==1) {
								this.$tools.showToast('关灯成功')
								this.orderInfo.order_status=20
								this.closeTips();
							}
						})
					}
				})
			},
			goOrderDetails(){
				uni.navigateTo({
					url:"/pages/order/orderDetails?order_id="+this.order_id
				})
			},
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 20upx;
	}
	.task-box{
		padding-top: 70upx;
		.task-tips{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #82819B;
			line-height: 36rpx;
		}
		.task-item{
			margin-top: 30upx;
			align-items: start;
			.task-icon{
				width: 116upx;
				height: 116upx;
				flex: none;
			}
			.task-cont{
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 36rpx;
				margin-left: 24rpx;
				padding-top: 14rpx;
				flex: 1;
				.task-top{
					.task-title{
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFB726;
						line-height: 36rpx;
					}
				}
				.progress-box{
					height: 20upx;
					background:#36355E;
					border-radius: 20upx;
					margin: 24rpx 0;
					.progress-child{
						height: 20upx;
						background:#26BCFD;
						border-radius: 20upx;
					}
				}
			}
		}
	}
	.point-box{
		margin-bottom: 54upx;
		.success-icon{
			width: 80upx;
			height: 80upx;
		}
		.point-name{
			font-size: 48upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 66px;
			color: #333;
		}
		.point-cont{
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 44upx;
			color: #333;
		}
	}
	.order-box{
		margin-top: 34upx;
		.order-item{
			min-height: 364upx;
			background:#fff;
			border-radius: 16upx;
			padding-top: 36upx;
			margin-bottom: 20upx;
			position: relative;
			.item-top{
				min-height: 304upx;
				padding-bottom: 10rpx;
				align-items:self-start;
				.order-info{
					padding-left: 28upx;
					min-height: 304upx;
					.order-name{
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333;
						.shop-name{
							font-size: 24upx;
							font-family: PingFang SC;
							font-weight: 400;
							line-height: 34upx;
							color: #6E6E6E;
							margin-left: 18upx;
						}
					}
					.order-time{
						font-size: 32upx;
						font-family: PingFang SC;
						font-weight: 500;
						line-height: 44upx;
						color: #E69C2F;
						margin-top: 14upx;
					}
					.order-date{
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 34upx;
						color: #6E6E6E;
						margin-top: 10upx;
					}
					.order-btn{
						width: 200upx;
						height: 70upx;
						line-height: 70upx;
						text-align: center;
						border: 2upx solid #FFB726;
						border-radius: 16upx;
						font-size: 36upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333;
						margin-top: 26upx;
					}
					.noStarted{
						background-color: #FFB726;
					}
					.end{
						color: #707070;
						border: 2upx solid #707070;
					}
				}
				.order-img{
					width: 304upx;
					height: 304upx;
					flex: none;
				}
			}
			button::after {
				border: none;
			}
			button {
				margin-left: 0;
				margin-right: 0;
				padding-left: 0;
				padding-right: 0;
				line-height: 1;
				color: #FFFFFF;
				font-size: 28rpx;
				background: none;
				width: 100%;
				border: none;
			}
			.open-box{
				padding: 30rpx;
				padding-top: 0;
				.open-btn{
					width: 304rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border: 2upx solid #FFB726;
					border-radius: 16upx;
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333;
				}
				.share{
					background: #FFB726;
					width: 304rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border: 2rpx solid #FFB726;
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333;
					border-radius: 20rpx;
				}
			}
			.item-bottom{
				height: 60upx;
				background: #EAEAEA;
				border-radius: 0px 0px 16upx 16upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 60upx;
				color: #999999;
				padding: 0 28upx;
				.icon-more{
					border-color: #969696;
					width: 12upx;
					height: 13upx;
					margin-left: 10upx;
				}
			}
			.order-status{
				width: 136upx;
				height: 44upx;
				background: #2CA522;
				border-radius: 0px 16upx 0px 16upx;
				font-size: 24upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #FFFFFF;
				text-align: center;
				position: absolute;
				top: 0;
				right: 0;
			}
		}
	}
	.mask-box{
		background:rgba(0, 0, 0, .5);
		border-radius: 16upx;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.tips-box{
		width: 660upx;
		height: 390upx;
		background:#fff;
		border-radius: 16upx;
		position: fixed;
		top: 400upx;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 999;
		.tips-name{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 800;
			line-height: 50upx;
			color: #333;
			margin: 90upx 0;
		}
		.btn-box{
			margin-top: 10upx;
			.tips-btn{
				width: 240upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border: 2upx solid #FFB726;
				border-radius: 16upx;
				font-size: 36upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333;
			}
			.noStarted{
				background-color: #FFB726;
				margin-left: 28upx;
			}
		}
	}
</style>
